<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>

<html>
    <head>
        <%@ include file="videoHead.jsp" %>
        <title>${model.video.metaData.title}</title>

        <%@ include file="jquery.jsp" %>
        <script type="text/javascript" src="<c:url value="/script/videoelement/videoelement-and-player.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
        <link rel="stylesheet" href="<c:url value="/script/videoelement/videoelementplayer.css"/>"></link>
    </head>

    <body class="mainframe bgcolor1" style="padding-top:5.0em; padding-bottom:0.5em" onload="init();">
        <center>
            <div class="wrapper">
                <video id="videoPlayer" preload="none">
                    <source type='video/webm' src="" />
                    <track kind="subtitles" label="Foreign Parts" src="${model.subtitles}" srclang="en"/>
                    <p> Your browser does not support video playback and needs to be updated! </p>
                </video>
            </div>

            <div style="padding-top:0.7em;padding-bottom:0.7em">

                <span id="quality">Quality:</span>
                
                <select id="videoQuality" items="${model.qualities}" onchange="changeQuality();" style="padding-left:0.25em;padding-right:0.25em;margin-right:0.5em">
                    <c:forEach items="${model.qualities}" var="quality">
                        <c:choose>
                            <c:when test="${quality eq model.defaultQuality}">
                                <option selected="selected" value="${quality}">${quality}</option>
                            </c:when>
                            <c:otherwise>
                                <option value="${quality}">${quality}</option>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </select>
            </div>
        </center>
                    
        <script>
            var position = 0;
            var timeOffset = 0;
            var quality = ${model.defaultQuality};
            var webmUrl;
            var player = false;
            var status = "";

            function init() {
                
                player = new MediaElementPlayer('#videoPlayer', {
                    // Start Volume
                    startVolume: 1.0,
                    // The order of controls you want on the control bar
                    features: ['playpause','current','progress','duration','tracks','volume','fullscreen','captioncustomiser'],
                    // Hide controls when playing and mouse is not over the video
                    alwaysShowControls: false,
                    // Turns keyboard support on and off for this instance
                    enableKeyboard: true,
                    // Duration
                    duration: ${model.duration},
                    //Poster
                    poster: "${model.poster}",
                    // Enable forced subtitles
                    startLanguage: 'en',
                    // Type
                    type: 'video/webm',

                        success: function (media, domObject) {

                            // Load Content
                            updateUrls();
                            media.setSrc([{ src: webmUrl, type: 'video/webm' }]);
                            media.load();

                            // Timer Callback
                            media.addEventListener('timeupdate', function()
                            {
                                position = Math.round(media.currentTime);
                                updatePosition();

                            }, false);
                        }
                });

                player.setCurrentTime = function(time) {

                    player.currentTime = time;

                    timeOffset = Math.round(time);
                    loadVideo();
                };
            }

            function loadVideo() {
                updateUrls();
                player.setSrc([{ src: webmUrl, type: 'video/webm' }]);
                player.pause();
                player.load();
                player.play();
            }

            function updateUrls() {
                webmUrl = "${model.streamURL}&format=webm&audioCodec=vorbis&maxAudioChannels=2&maxSampleRate=48000&videoCodec=vp8&videoQuality=" + quality + "&offset=" + timeOffset;
            }

            function updatePosition() {
                var pos = getPosition();
                player.currentTime = pos;
                player.updateCurrent();
            }

            function changeQuality()
            {
                var videoQuality = document.getElementById('videoQuality');
                quality = videoQuality.options[videoQuality.selectedIndex].value;
                timeOffset = getPosition();
                loadVideo();
            }

            function getPosition() {
                return parseInt(timeOffset) + parseInt(position);
            }

        </script>
    </body>
</html>